<template>
  <el-dialog :title="$t('personal.transAdmin.title')" :visible.sync="showUpdateDialog" width="400px" @close="reset">
    <div class="base-modal-content trans-admin">
      <!-- 内容主体区域 -->
      <p>{{ $t('personal.transAdmin.tip[0]') }}</p> 
      <p>{{ $t('personal.transAdmin.tip[1]') }}</p> 
      <div class="send-code">
        <el-input v-model="verifyCode" :placeholder="$t('common.placeholder.inputValidateCode')"></el-input>
        <el-button v-if="canSend" type="primary" @click="sendCode">{{ $t('common.button.sendCode')}}</el-button>
        <el-button v-else type="primary" @click="sendCode" :disabled="!canSend">{{ $t('common.button.resendWithTime', { second: lastSecond }) }}</el-button>
      </div>
      <div class="next">
        <el-button type="primary" @click="next" :disabled="!verifyCode">{{ $t('common.base.steps.next') }}</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>

import { BaseSelectUserModeEnum } from '@src/component/common/BaseSelectUser'
import { t } from '@src/locales'

export default {
  name: 'trans-admin',
  data() {
    return {
      verifyCode: '',
      showUpdateDialog: false,
      canSend: true,
      lastSecond: 60
    }
  }, 
  methods: {
    async sendCode(){
      try {
        const { status, succ } = await this.$http.get('/security/user/sendVCode');
        if( !succ || status != 0) return this.$platform.notification({
          title: t('common.base.tip.sendCode.title[1]'),
          message: t('common.base.tip.sendCode.message[1]'),
          type: 'error'
        })
        this.$platform.notification({
          title: t('common.base.tip.sendCode.title[0]'),
          type: 'success'
        })
        this.canSend = false
        let second = 60
        let timer = null
        timer = setInterval(()=>{
          second -= 1;
          if(second > 0){
            this.lastSecond = second
          }else{
            this.canSend = true
            clearInterval(timer)
          }
        }, 1000);
      } catch (error) {
        console.warn(error);
      }
    },
    async next(){
      try {
        const { status, succ, message } = await this.$http.get(`/security/user/verifyVCode/${this.verifyCode}`);
        if( !succ || status != 0) return this.$platform.notification({
          title: t('common.base.tip.sendCode.title[1]'),
          message: message || t('common.base.tip.sendCode.message[1]'),
          type: 'error'
        })
        this.showUpdateDialog = false 
        this.chooseNextAdmin() 
      } catch (error) {
        console.warn(error);
      }
    },
    chooseNextAdmin(){
      const options = {
        title: t('personal.transAdmin.chooseNewManager'),
        max: 1,
        seeAllOrg: true, // 是否查询 降低组织架构选项， 如果开启则降低 组织架构可见性
        mode: BaseSelectUserModeEnum.Filter
        
      };
      this.$fast.select.single.user(options)
        .then(async data => {
          if (!data || !data.data) return;
          let users = data.data.users || [];
          let user = users[0] || {};
          let userId = user.userId;
          let userName = user.displayName;
          if (!userId) return console.warn('没有获取到用户id');
          if (!await this.$platform.confirm(t('personal.transAdmin.transManagerConfirm', { userName }))) return;
          this.setNewAdmin(userId);
        })
        .catch(err => {
          console.warn(err);
        });
    },
    async setNewAdmin(userId){
      try {
        const { status, succ, message } = await this.$http.get(`/security/user/transferSuperAdmin/${userId}`);
        if( !succ || status != 0) return this.$platform.notification({
          title: t('common.base.tip.sendCode.title[1]'),
          message: message || t('common.base.tip.sendCode.message[1]'),
          type: 'error'
        })
        this.$platform.notification({
          title: t('common.base.tip.modifySuccess'),
          type: 'success'
        })
        this.$emit('update')
      } catch (error) {
        console.warn(error);
      }
    },
    openDialog() {
      this.userId = '22a459df-fd7b-11ea-b4de-00163e158f62'
      this.showUpdateDialog = true;
    },
    reset(){
      this.showUpdateDialog = false
    }
  },
}
</script>

<style lang="scss">
.trans-admin {
  .send-code {
    display: flex;
    margin-bottom: 20px;
    button {
      margin-left: 20px;
    }
  }
  .next {
    button {
      width: 100%;
    }
  }
  .el-button--primary.is-disabled{
    background-color: $color-primary-light-2!important;
    border-color: $color-primary-light-2!important;
  }
}
</style>